<template>
  <div class="tab-control" style="z-index: 999;">
      <div class="tab-control-item" :class="{active: index == currentIndex}" @click="itemClick(index)" v-for="(item, index) in title" :key="index">
          <span>{{item}}</span>
      </div>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity'
export default {
    props: {
        title: {
            type: Array,
            default() {
                return []
            }

        } 
    },
    setup(props, {emit}) {
        let currentIndex = ref(0)
        function itemClick(index) {
            currentIndex.value = index
            emit('tabClick', index)
        }
        return {
            currentIndex,
            itemClick
        }
    }
}
</script>

<style lang="scss" scoped>
.tab-control {
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: flex;
    position: sticky;
    top: 0px;
    background-color: #fff;
    .tab-control-item {
        text-align: center;
        flex: 1;
        span {
            padding-bottom: 8px;
        }
    }
    .active {
        // background-color: $active-color;
        color: $active-color;
        span {
            border-bottom: 3px solid $active-color;
        }
    }
}
</style>